{extend name="extra@admin/content"}
{block name="button"}
<div class="nowrap pull-rignt" style="margin-top:10px">
<div class="hr-line-dashed"></div>
<span style="color:red;"> 警告：请不要添加重复的原料</span>
</div>
{/block}
{block name="content"}
<style>
.ibox-content{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
}
</style>
<form id="form1" action="{$url}" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    <div class="layui-form-item">
        <div class="layui-inline">
             <div class="layui-input-inline" >
                 <input name="" class="layui-input"  style="border:0px;color:#ff5722;" value="原料" readonly>
             </div>
            <div class="layui-input-inline" >
                <input name="" class="layui-input" value="批产量用量/千克" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" >
                <input name="" class="layui-input" value="批产量用量/克" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="单个用量/克" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="损耗率" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="销售价" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="成本" style="border:0px;color:#ff5722;" readonly>
            </div>
        </div>
    </div>
    {if condition="!empty($list)"}
        {foreach name="list" item="v" key="k"}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="m_id[]" lay-verify="required" readonly="readonly" lay-filter="aihao" lay-search>
                            {volist name="material" id="v1"}
                                <option value="{$v1.id}" {if condition="$v.m_id eq $v1.id"} selected {/if}  data-price="{$v1.price}">{$v1.name}/{$v1.unit}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="layui-input-inline" >
                        <input type="text" name="p_use_kg[]" required="required" placeholder="请输入批产量用量(公斤)" autocomplete="off" class="layui-input" value="{$v.p_use_kg}" data-id="{$v.id}" onkeyup="count_chengben(this)">
                    </div>
                    <div class="layui-input-inline" >
                        <input type="text" name="p_use_g[]" required="required" placeholder="批产量用量(克)" autocomplete="off" class="layui-input" value="{$v.p_use_g}" data-id="{$v.id}" placeholder="请输入批产量用量(克)">
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="s_use_g[]" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"  value="{$v.s_use_g}" data-id="{$v.id}">
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="loss[]" required="required" placeholder="损耗率(克)" autocomplete="off" class="layui-input"  value="{$v.loss}" data-id="{$v.id}">
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="chengben_price[]" required="required" placeholder="销售价" autocomplete="off" class="layui-input"  value="{$v.chengben_price}" data-id="{$v.id}" >
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="chengben[]" required="required" placeholder="成本" autocomplete="off" class="layui-input"  value="{$v.chengben}" data-id="{$v.id}" >
                    </div>
                </div>
                <input type="hidden" name="ids[]" value="{$v.id}">
                {if condition="$k neq 0"}
                <span class="layui-btn tianjiayihan" type="btn" data-id="{$v.id}"  onclick="delspec(this);">移除</span>
                {/if}
            </div>
        {/foreach}
    {else /}
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="m_id[]" lay-verify="required" readonly="readonly" lay-filter="aihao" lay-search>
                        {volist name="material" id="v1"}
                            <option value="{$v1.id}" data-price="{$v1.price}">{$v1.name}/{$v1.unit}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-input-inline" >
                    <input type="text" name="p_use_kg[]" required="required" placeholder="批产量用量(公斤)" autocomplete="off" class="layui-input"   value="" data-id="" title="请输入批产量用量(公斤)" onkeyup="count_chengben(this)">
                </div>
                <div class="layui-input-inline" >
                    <input type="text" name="p_use_g[]" required="required" placeholder="批产量用量(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="请输入批产量用量(克)">
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="s_use_g[]" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="单个用量(克)">
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="loss[]" required="required" placeholder="损耗率(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="损耗率(克)">
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="chengben_price[]" required="required" placeholder="销售价" autocomplete="off" class="layui-input"   value="" data-id="" title="销售价">
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="chengben[]" required="required" placeholder="成本" autocomplete="off" class="layui-input"   value="" data-id="" title="成本">
                </div>
            </div>
        </div>
    {/if}
    
    <div class="hr-line-dashed" id=add></div>
    <div class="col-sm-4 col-sm-offset-2">
        <input type='hidden' value='{$id}' name='p_id'/>
        <input type="hidden" name="sign" value="1">
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="button" onclick="tianjia()">添加</button>
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    /**
     * 添加属性
     * @Author   lingyun
     * @DateTime 2017-11-30T19:50:42+0800
     * @return   {[type]}                 [description]
     */
    function tianjia(){ 
            var ht = '<div class="layui-form-item"><div class="layui-inline"><div class="layui-input-inline"><select name="m_id[]" lay-verify="required" lay-filter="aihao" lay-search>{volist name="material" id="v1"}<option value="{$v1.id}" data-price="{$v1.price}">{$v1.name}/{$v1.unit}</option>{/volist}</select></div><div class="layui-input-inline" ><input type="text" name="p_use_kg[]" required="required" placeholder="批产量用量(公斤)" autocomplete="off" class="layui-input"   value="" data-id="" title="请输入批产量用量(公斤)" onkeyup="count_chengben(this)"></div><div class="layui-input-inline" ><input type="text" name="p_use_g[]" required="required" placeholder="批产量用量(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="请输入批产量用量(克)"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="s_use_g[]" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="单个用量(克)"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="loss[]" required="required" placeholder="损耗率(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="损耗率(克)"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="chengben_price[]" required="required" placeholder="销售价" autocomplete="off" class="layui-input"   value="" data-id="" title="销售价"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="chengben[]" required="required" placeholder="成本" autocomplete="off" class="layui-input"   value="" data-id="" title="成本"></div></div><span class="layui-btn tianjiayihan" type="btn" onclick="reduce(this);">移除</span></div>';
        // var html = ht;
        // var html = '<div class="layui-form-item">'+ht+'</div>';
        // alert(html);
        $("#add").before(ht);
        window.form.render('select'); //刷新select选择框渲染
        $('#create').empty();       //清空元素内部元素
    }
    function reduce(obj){
        $(obj).parent().remove();
    }


    // /**
    //  * 检查订单
    //  * @return {[type]} [description]
    //  */
    // function check_form(){
    //     $('input[name="num[]"]').each(function(index){
    //       if($(this).val() == ''){
    //         layer.msg('请输入用量',{icon:2,time:1500,shade: 0.1}, function(index){
    //             layer.close(index);
    //         });
    //         return false;
    //       }
    //     });
    //     $('#form1').submit();
    // }

    /**
     * 生成属性
     * @Author   lingyun
     * @DateTime 2017-11-30T20:09:49+0800
     * @return   {[type]}                 [description]
     */
    function createspec(){
        var spec_id = new Array();      //属性id
        var spec_name = new Array();    //属性的名称
        var title = new Array();    //属性分类 1140-18 = 1122
        var goods_id = $('input[name=goods_id]').val();
        var status = 1;
        $("select option:selected").each(function(){
            if($(this).parent().parent().parent().find('input[name="detail[]"]').val() == ''){
                status = 0;     //结束标志
                layer.msg('请输入属性名称'); 
                return false;
            }
            var specid = $(this).val();
            var specname = $(this).parent().parent().parent().find('input[name="detail[]"]').val();
            var speccate = $(this).text();
            var titles = speccate+': '+specname;     //组合属性名称
            // if(spec_id.indexOf(specid)<0){    //不存在返回-1
                spec_id.push(specid);
            // }   
            // if(specname.indexOf(spec_name)<0){
                spec_name.push(specname);
            // }
            // if(specname.indexOf(spec_name)<0){
                title.push(titles);
            // }
        });
        if(status == 0){
            return false;
        }
        $.post('{:url("Goodsspec/addspeccate")}',
        {goods_id:goods_id,spec_id:spec_id,spec_name:spec_name,title:title},
        function(data){
            $('#create').empty();       //清空元素内部元素
            $("#create").append(data.msg);
            return false;
        });
        return false;
    }
    //删除商品属性
    function delspec(obj){
        var id = $(obj).attr('data-id');
        var ve = $(obj).attr('data-val');
        var goods_id = $('input[name=goods_id').val();
        $.post('{:url("Peifang/delspec")}',
            {id:id,goods_id:goods_id},
            function(data){
                if(data.code == 1){
                    $(obj).parent().remove();
                }
                // $("input[name='title[]']").each(function(){
                //     if($(obj).val().indexOf(ve)>=0){
                //         $(obj).parent().remove();
                //     } 
                // });
//                $(obj).parent().remove();       //移除元素
//                $('#create').empty();       //清空元素内部元素
//                $("#create").append(data.msg);
                return false;
        });
        return false;
    }   
    /**
     * 删除商品属性详情
     * @Author   lingyun
     * @DateTime 2017-12-01T15:03:30+0800
     * @return   {[type]}                 [description]
     */
    function del(obj,database){
        var id = $(obj).attr('data-id');
        $.post('{:url("Goodsspec/del")}',
            {id:id,database:database},
            function(data){
                $(obj).parent().remove();       //移除元素
                // $('#create').empty();       //清空元素内部元素
                // $("#create").append(data.msg);
                return false;
        });
        return false;
    }
    /**
     * 修改属性详情值
     * @Author   lingyun
     * @DateTime 2017-12-01T15:46:45+0800
     * @return   {[type]}                 [description]
     */
    function saveval(obj,field){
        var id = $(obj).attr('data-id');
        var val = $(obj).val();
        $.post('{:url("Goodsspec/saveval")}',
            {id:id,val:val,field:field},
            function(data){
                if(data.code == 1){
                    // layer.msg('修改成功'); 
                }
                // $(obj).parent().remove();       //移除元素
                // $('#create').empty();       //清空元素内部元素
                // $("#create").append(data.msg);
                return false;
        });
        return false;
    }
    /**
     * 修改属性名称，一旦修改则重新生成属性组合
     * @Author   lingyun
     * @DateTime 2017-12-01T15:54:50+0800
     * @return   {[type]}                 [description]
     */
    function savespec(obj){
        var id = $(obj).attr('data-id');
        var val = $(obj).val();
        var goods_id = $('input[name=goods_id]').val();
        var material_id = $(obj).parent().parent().find('select option:checked').val();
        $.post('{:url("Peifang/savespec")}',
            {id:id,num:val,goods_id:goods_id,material_id:material_id},
            function(data){
                // $(obj).parent().remove();       //移除元素
                if(data.code == 1){
                    var spec_name = data.data.spec_name;
                    var reg = new RegExp(spec_name,"ig")
                    $("input[name='title[]']").each(function(){
                        var obj = $(this);
                        obj.val(obj.val().replace(reg,val));
                    });
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
//                $("#sub").removeAttr("disabled");
                    });
//                    location.reload();
                }
                // $("#create").append(data.msg);
                return false;
        });
        return false;
    }

    /**
     * 计算成本
     */
    function count_chengben(obj){
        var price = parseFloat($(obj).parent().parent().find('select option:selected').attr('data-price')).toFixed(2);        //原料价格
        var num = parseFloat($(obj).val());     //使用数量
        var chengben = parseFloat(parseFloat(price)*parseFloat(num)).toFixed(6);

        $(obj).parent().parent().find("input[name='chengben[]']").val(chengben);
    }

    form.on('select(aihao)', function(data){
        var price = parseFloat($(data.elem).find('option:selected').attr('data-price')).toFixed(2);
        var num = parseFloat($(data.elem).parent().parent().find("input[name='p_use_kg[]']").val());     //使用数量

        if(num == 0){
            $(data.elem).parent().parent().find("input[name='chengben[]']").val(0);
        }else{
            var chengben = parseFloat(parseFloat(price)*parseFloat(num)).toFixed(6);
            $(data.elem).parent().parent().find("input[name='chengben[]']").val(chengben);
        }
//        console.log(data.value); //得到被选中的值
//        console.log($(data.elem).find('option:selected').attr('data-price')); //得到美化后的DOM对象
    });
</script>
</form>
{/block}